<script>
import { mapGetters, mapActions } from 'vuex';
import BaseModule from '../base/BaseModule';

/*
 * 图层查询模块
 */
export default {
  name: 'SearchModule',
  title: '属性查询',
  icon: 'search',
  position: 'left',
  order: 1,
  visible: true,
  mixins: [BaseModule],
  data() {
    return {
      //选择的图层
      selectedLayer: '',
      //查询服务地址
      layerService: '',
      //查询字段
      queryFields: [],
      //查询操作符
      queryOperates: [
        {
          label: '等于',
          value: '=',
        },
        {
          label: '不等于',
          value: '<>',
        },
        {
          label: '包含',
          value: 'LIKE',
        },
      ],
      //查询关联
      queryUnions: [
        {
          label: '和',
          value: 'AND',
        },
        {
          label: '或',
          value: 'OR',
        },
      ],
      //查询项
      queryItems: [
        {
          field: '',
          operate: '=',
          value: '',
          union: 'AND',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['wfsLayerData']),
    //获取地图图层
    queryLayers() {
      if (!this.wfsLayerData) {
        return [];
      }
      return Object.keys(this.wfsLayerData).map(p => {
        return {
          label: p,
          value: p,
        };
      });
    },
  },
  methods: {
    ...mapActions({
      wfsParamsQuery: 'MAP_WFS_PARAMS',
      wfsQuery: 'MAP_WFS_QUERY',
    }),
    //获取图层字段
    getLayerFields(layerId) {
      this.layerService = this.wfsLayerData[layerId].servicesurl;
      this.wfsParamsQuery({
        url: this.layerService,
      }).then(p => {
        this.queryFields = p;
      });
    },
    //新增查询项
    addQueryItem() {
      this.queryItems.push({
        field: '',
        operate: '=',
        value: '',
        union: 'AND',
      });
    },
    //删除查询项
    deleteQueryItem(index) {
      this.queryItems.splice(index, 1);
    },
    //构建查询
    buildQuery() {
      let where = [];
      let items = this.queryItems.filter(p => p.field && p.value);
      for (let i = 0; i < items.length; i++) {
        let p = items[i];
        let dec = p.operate == 'LIKE' ? '%' : '';
        where.push(`"${p.field}" ${p.operate} '${dec}${p.value}${dec}'`);
        if (i < items.length - 1) {
          where.push(` ${p.union} `);
        }
      }
      return where.join('');
    },
    //执行查询
    doQuery() {
      if (!this.layerService) {
        this.$Message.info('请选择查询图层！');
        return;
      }
      let where = this.buildQuery();
      this.addBottomModuleEx({
        type: 'FeatureListModule',
        id: 'searchDataList',
        title: '属性查询',
        options: {
          service: this.layerService,
          where: where,
        },
      }).then(p => {});
    },
    //重置查询
    resetQuery() {
      this.queryItems = [
        {
          field: '',
          operate: '=',
          value: '',
          union: 'AND',
        },
      ];
    },
  },
};
</script>

<template>
  <div class="search-module-wrapper">
    <div class="layer-select">
      <label>查询图层：</label>
      <Select
        v-model="selectedLayer"
        size="small"
        @on-change="getLayerFields">
        <Option
          v-for="item in queryLayers"
          :key="item.value"
          :value="item.value">{{ item.label }}</Option>
      </Select>
    </div>
    <div class="query-builder">
      <div
        v-for="(item,index) in queryItems"
        :key="index"
        class="query-item">
        <div class="item-content">
          <div class="item-row">
            <Select
              v-model="item.field"
              size="small"
              class="column-one"
              placeholder="字段">
              <Option
                v-for="item in queryFields"
                :key="item.filename"
                :value="item.filename">{{ item.filename }}</Option>
            </Select>
            <Select
              v-model="item.operate"
              size="small"
              class="column-two"
              placeholder="操作">
              <Option
                v-for="item in queryOperates"
                :key="item.value"
                :value="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="item-row">
            <Input
              v-model="item.value"
              size="small"
              class="column-one"
              placeholder="字段值" />
            <Select
              v-model="item.union"
              size="small"
              class="column-two"
              placeholder="关联">
              <Option
                v-for="item in queryUnions"
                :key="item.value"
                :value="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </div>
        <div class="item-operate">
          <Icon
            v-show="index>0"
            type="trash-b"
            title="删除"
            @click.native.stop="deleteQueryItem(index)" />
          <Icon
            type="plus"
            title="新增"
            @click.native.stop="addQueryItem()" />
        </div>
      </div>
      <div class="query-item push-right">
        <Button
          type="primary"
          size="small"
          @click="doQuery">查询</Button>
        <Button
          type="primary"
          size="small"
          @click="resetQuery">重置</Button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.search-module-wrapper {
  .layer-select {
    color: #ffffff;
    .k-select {
      width: 180px;
      margin-left: 10px;
    }
  }
  .query-builder {
    margin-top: 10px;
  }
  .query-item {
    margin-top: 8px;
    background-color: #303030;
    border-radius: 3px;
    list-style: none;
    padding: 8px;
    position: relative;
    &.push-right {
      text-align: right;
    }
    .item-row {
      margin-top: 5px;
      &:first-child {
        margin-top: 0;
      }
    }
    .column-one {
      width: 135px;
    }
    .column-two {
      width: 70px;
      margin-left: 5px;
    }
    .item-operate {
      position: absolute;
      top: 0;
      right: 0;
      color: #ffffff;
      text-align: right;
      .k-icon {
        display: block;
        font-size: 18px;
        margin: 13px 11px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
        .remain-top {
          margin-top: 15px;
        }
      }
    }
    .k-btn-small {
      padding: 2px 10px;
      margin-left: 4px;
    }
  }
}
</style>
